<template>
  <div class="login">
      
      <span class="close">
        <i class="iconicon-test iconfont"></i>
      </span>
      <h2 class="logo">
        <i class="iconnew  iconfont"></i>
      </h2>
      <Myinput v-model="user.username"
       
      
      placeholder='用户名/手机号码'
       :rules="rules.username"
      msg="手机号输入不合法"
      
      ></Myinput>
      <!-- v-model="user.password"双向绑定父组件输入子组件也可以改变因为传了参数过去 -->
      <Myinput v-model="user.password"
     
      type='password'
      placeholder='密码'
       :rules="rules.password"
      msg="密码3-18位"
      
      ></Myinput>
      <!-- 编程式导航，因为封装过全局的直接用就行了 router-link相当于a-->
      <div class="login tips">没有账号？去<router-link  to="/register">注册</router-link></div>
      
      <!-- 自定义组件上的事情，其实都是在自定义组件上做的，就是父组件 -->
      <MyButton @click="loginFn" type="danger">登录</MyButton>
      
  </div>
</template>

<script>
import MyButton from '../components/MyButton.vue'
import Myinput from '../components/Myinput.vue'
import {userLoginAPI } from '../apis/user'
import {setToken} from '../utils/localData'
export default {
  data () {
    return {
      user:{

        username:'',
        password:''
      },
       rules: {
        username: /^1\d{10}$|^[a-zA-Z]\w{2,10}$|^1\d{4,5}$/,
        password: /^[a-zA-Z0-9~!@#$%^&*()_+=]{3,18}$/,
      },
    }
  },
components: {
  MyButton,
  Myinput
},
methods: {
  //e是接受子组件传过来的数据或者叫做定义的东西，用来触发子组件的事件和接收
  //点击然后登录按钮就获取到数据
  loginFn(){
    
    if (
        this.rules.username.test(this.user.username) &&
        this.rules.password.test(this.user.password)
      ){

      // console.log('触发了',e);
      userLoginAPI({
          // username：是数据那边接口的
          // this.user.username,这个是本地输入的内容
        username:this.user.username,
        password:this.user.password
      }).then((res)=>{
        console.log(res);
        const{message}=res.data;
        if(message==='登录成功'){
          //登录成功后结构token
          const {token} = res.data.data
             setToken(token)
          //然后把东西存在本地浏览器中
// localStorage.setItem('hmtt_token',token)
//跳转到个人中心页，并转递id参数到个人中心页，因为用户的接口需要id才可以记录每个人账号
this.$router.push({path:'/user',query:{id:res.data.data.user.id}})
//成功提示
this.$toast.success(message)
        }else{
          this.$toast.fail(message)
        }
      });
    }else{
      this.$toast('请输入正确的用户名或密码')
    }
  } 
//   getValueFn(val){
//     //拿到子组件传过来的内容，然后给到上面封装好里面this.user.username，可以让两个都同步，一起改变
// this.user.username=val
  
}
}
</script>

<style lang="less" scoped>
.close-btn{
  position: fixed;
  left: 30px;
  top: 30px;
  .iconfont{
    font-size: 30px;
  }
}
.logo{
  display: flex;
  justify-content: center;
  .iconfont{

    color: red;
    font-size: 100px;
  }
}
.tips{
  padding: 20px;
  text-align: right;
}
</style>

